<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="采集器名称">
        <el-input
          v-model="table.query.name"
          placeholder="采集器名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="视频网站名称">
        <el-select
          v-model="table.query.site"
          placeholder="视频网站名称"
          style="max-width: 150px;"
        >
          <el-option
            key="haokan"
            label="好看"
            value="haokan"
          />
          <el-option
            key="fun"
            label="风行"
            value="fun"
          />
          <el-option
            key="douyin"
            label="抖音"
            value="douyin"
          />
          <el-option
            key="kuaishou"
            label="快手"
            value="kuaishou"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="table.query.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="ml20"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button @click="handleReset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-main style="background-color:#fff">
    <el-table
      :data="table.data"
      style="width: 100%"
    >
      <el-table-column
        prop="index"
        label="序号"
        width="100"
      >
        <template #default="scope">
          {{ (scope.$index + 1) + ((table.query.page - 1) * table.query.limit) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="采集器名称"
        min-width="200"
      >
        <template #default="scope">
          <a @click="clickName(scope.row)">{{ scope.row.name }}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="site"
        label="视频网站"
        min-width="200"
      >
        <template #default="scope">
          {{ getSiteName(scope.row.site ) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="videoName"
        label="视频名称"
        min-width="200"
      />
      <el-table-column
        prop="videoUrl"
        label="视频地址"
        min-width="200"
      />
      <el-table-column
        prop="proxyServer"
        label="动态代理"
        min-width="200"
      />
      <el-table-column
        prop="device"
        label="访问设备"
        min-width="200"
      />
      <el-table-column
        prop="osName"
        label="访问系统"
        min-width="200"
      />
      <el-table-column
        prop="osVersion"
        label="访问系统版本"
        min-width="200"
      />
      <el-table-column
        prop="browserName"
        label="访问浏览器"
        min-width="200"
      />
      <el-table-column
        prop="browserVersion"
        label="浏览器版本"
        min-width="200"
      />
      <el-table-column
        prop="statDate"
        label="流量日期"
        min-width="200"
      />
      <el-table-column
        prop="statFlow"
        label="流量总计"
        min-width="200"
      />
    </el-table>

    <br>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="table.total"
      :page-size="table.query.limit"
      @current-change="handleChangePage"
      @size-change="handleChangeLimit"
    />
  </el-main>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router/index.js'
import { getFlow } from '@/apis/netflow.js'
import { ElMessage } from 'element-plus'

const table = ref({
  total: 0,
  query: {
    limit: 20,
    page: 1,
    order: null,
    name: null,
    site: null,
    time: []
  },
  data: [
    {
      id: '1',
      name: '采集器<127.0.0.1>',
      total: 0
    }
  ]
})

const init = () => {
  const params = {
    name: table.value.query.name,
    site: table.value.query.site,
    startDate: table.value.query.time[0] || null,
    endDate: table.value.query.time[0] || null,
    limit: table.value.query.limit,
    page: table.value.query.page
  }
  getFlow(params).then((result) => {
    table.value.total = result.total
    table.value.data = result.list
  })
}

init()

// const cellClick = (row, column, cell, event) => {
//   router.push({
//     name: 'flowDetail',
//     query: {
//       name: row.name
//     }
//   })
// }

const getSiteName = (site) => {
  switch (site) {
    case 'haokan':
      return '好看'
    case 'fun':
      return '风行'
    case 'douyin':
      return '抖音'
    case 'kuaishou':
      return '快手'
  }
}
const handleChangePage = (value) => {
  table.value.query.page = value
  init()
}
const handleChangeLimit = (value) => {
  table.value.query.limit = value
  init()
}
const handleSearch = () => {
  init()
}
const handleReset = () => {
  table.value.query.name = null
  table.value.query.site = null
  table.value.query.time = []
  init()
}

const clickName = (value) => {
  router.push({
    name: 'flowDetail',
    query: {
      name: value.name
    }
  })
}
</script>

<style lang="scss">
a {
  color: blue;
  cursor: pointer;
  //text-decoration: none; /* 移除默认的下划线效果 */
  &:hover, &:active {
    text-decoration: underline;
    color: red; // 可选：在悬浮时改变文本颜色
  }
}

</style>
